<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Translation</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <!-- Animate.css for animations -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            min-height: 100vh;
            font-family: 'Arial', sans-serif;
        }
        .navbar {
            background: linear-gradient(135deg, #667eea, #764ba2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            animation: fadeInUp 1s ease;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
            transition: transform 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-3px);
        }
        .progress {
            border-radius: 12px;
            overflow: hidden;
        }
        .progress-bar {
            transition: width 0.5s ease;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }
        .result-message {
            margin-top: 20px;
            animation: fadeIn 1s ease;
        }
        .file-upload {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }

        .file-upload input[type="file"] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .file-upload-label {
            display: block;
            padding: 10px 15px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .file-upload-label:hover {
            background: linear-gradient(135deg, #764ba2, #667eea);
        }

        .uploaded-file {
            margin-top: 15px;
            font-weight: bold;
            color: #333;
        }

        .feature-icon {
            font-size: 2.5rem;
            color: #667eea;
            margin-bottom: 15px;
        }

        .testimonial-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
        }

        .faq-item {
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .faq-item:last-child {
            border-bottom: none;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <!-- Top Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">基于IPEX-LLM的开箱即用的PDF翻译工具</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/features">主要特性</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact">团队信息</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow animate__animated animate__fadeInUp">
                    <div class="card-header">
                        <h3 class="card-title text-center">基于IPEX-LLM的开箱即用的PDF翻译工具</h3>
                    </div>
                    <div class="card-body">
                        <form id="uploadForm" method="POST" enctype="multipart/form-data">
                            <!-- File Upload -->
                            <div class="mb-3">
                                <label for="fileInput" class="form-label"></label>
                                <div class="file-upload">
                                    <input type="file" class="form-control" id="fileInput" name="file" accept=".pdf" required>
                                    <label for="fileInput" class="file-upload-label">
                                        <i class="fas fa-cloud-upload-alt"></i> 上传PDF文件
                                    </label>
                                </div>
                                <!-- Display uploaded file name -->
                                <div id="uploadedFileName" class="uploaded-file text-center mt-2" style="display: none;">
                                    <span>当前文件: <strong id="fileName"></strong></span>
                                </div>
                            </div>

                            <!-- Source Language -->
                            <div class="mb-3">
                                <label for="sourceLanguage" class="form-label">源语言</label>
                                <select class="form-select" id="sourceLanguage" name="source_language" required>
                                    <option value="en">English</option>
                                    <option value="zh">Chinese</option>
                                    <option value="es">Spanish</option>
                                    <option value="fr">French</option>
                                    <option value="de">German</option>
                                    <option value="ja">Japanese</option>
                                    <!-- Add more languages as needed -->
                                </select>
                            </div>

                            <!-- Target Language -->
                            <div class="mb-3">
                                <label for="targetLanguage" class="form-label">目标语言</label>
                                <select class="form-select" id="targetLanguage" name="target_language" required>
                                    <option value="en">English</option>
                                    <option value="zh">Chinese</option>
                                    <option value="es">Spanish</option>
                                    <option value="fr">French</option>
                                    <option value="de">German</option>
                                    <option value="ja">Japanese</option>
                                    <!-- Add more languages as needed -->
                                </select>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-language"></i> 开始翻译
                            </button>
                        </form>

                        <!-- Progress Bar -->
                        <div class="progress mt-4" id="progressBar" style="display: none;">
                            <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>

                        <!-- Result Message -->
                        <div id="resultMessage" class="mt-4 text-center result-message" style="display: none;">
                            <p class="text-success">翻译完成! <a id="downloadLink" href="#">点击下载翻译后的文件.</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Features Section -->
        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <h2 class="mb-4">项目优势</h2>
            </div>
            <div class="col-md-4 text-center animate__animated animate__fadeIn">
                <div class="feature-icon">
                    <i class="fas fa-fast-forward"></i>
                </div>
                <h4>准确性 & 可读性</h4>
                <p>基于大模型的文档翻译技术具备上下文关联能力，在确保翻译准确性的同时，显著提升了文本的可读性，实现了质量与流畅度的双重优化。</p>
            </div>
            <div class="col-md-4 text-center animate__animated animate__fadeIn animate__delay-1s">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h4>安全 & 隐私</h4>
                <p>基于ipex-llm的本地推理方案，消除数据外泄风险，有效保障了数据安全性与隐私保护。</p>
            </div>
            <div class="col-md-4 text-center animate__animated animate__fadeIn animate__delay-2s">
                <div class="feature-icon">
                    <i class="fas fa-globe"></i>
                </div>
                <h4>多语言支持</h4>
                <p>支持全球范围内的多种主流语言互译.</p>
            </div>
        </div>

        <!-- Testimonials Section -->
        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <h2 class="mb-4">用户评价</h2>
            </div>
            <div class="col-md-4 animate__animated animate__fadeIn">
                <div class="testimonial-card">
                    <p>"这个工具大大提升了我的阅读效率！"</p>
                    <p class="text-muted">- 张同学</p>
                </div>
            </div>
            <div class="col-md-4 animate__animated animate__fadeIn animate__delay-1s">
                <div class="testimonial-card">
                    <p>"翻译非常准确，用户界面很友好"</p>
                    <p class="text-muted">- 李同学</p>
                </div>
            </div>
            <div class="col-md-4 animate__animated animate__fadeIn animate__delay-2s">
                <div class="testimonial-card">
                    <p>"快速，安全，可靠"</p>
                    <p class="text-muted">- 王同学</p>
                </div>
            </div>
        </div>
        
        <!-- FAQ Section -->
        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <h2 class="mb-4">常见FAQ</h2>
            </div>
            <div class="col-md-6">
                <div class="faq-item">
                    <h5>翻译需要多久</h5>
                    <p>翻译时间从几十秒到几十分钟不等，主要取决于翻译文件的大小，单页文档的翻译大致为1分钟左右</p>
                </div>
                <div class="faq-item">
                    <h5>数据安全问题</h5>
                    <p>文档的翻译都是基于ipex-llm进行的本地推理，不会上传到其他地方，只会保存在本地</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="faq-item">
                    <h5>都支持什么语言</h5>
                    <p>详情见<a href="https://developers.google.com/admin-sdk/directory/v1/languages?hl=zh-cn">语言代码范围</a>
                       支持包含中文、英语、日语、西班牙语、法语在内的几十种语言</p>
                </div>
                <div class="faq-item">
                    <h5>使用的底层llm模型是什么</h5>
                    <p>Gemma 2 是 Google 最新的开放大语言模型。它有两种规模：90 亿参数和 270 亿参数，分别具有基础（预训练）和指令调优版本。
                       Gemma 基于 Google DeepMind 的 Gemini，拥有 8K Tokens 的上下文长度</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <!-- Custom JavaScript -->
    <script>
        // Show uploaded file name
        document.getElementById('fileInput').addEventListener('change', function (e) {
            const fileName = e.target.files[0].name;
            document.getElementById('fileName').textContent = fileName;
            document.getElementById('uploadedFileName').style.display = 'block';
        });

        // Handle form submission
        document.getElementById('uploadForm').addEventListener('submit', function (e) {
            e.preventDefault(); // Prevent form submission

            // Show progress bar
            const progressBar = document.getElementById('progressBar');
            const progressBarInner = progressBar.querySelector('.progress-bar');
            progressBar.style.display = 'block';

            // Simulate progress (for demonstration)
            let progress = 0;
            const interval = setInterval(() => {
                if (progress < 90) { // Simulate progress up to 90%
                    progress += 10;
                    progressBarInner.style.width = `${progress}%`;
                    progressBarInner.textContent = `${progress}%`;
                }
            }, 500);

            // Submit form data via AJAX
            const formData = new FormData(this);
            fetch('/', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                clearInterval(interval); // Stop the simulated progress
                progressBarInner.style.width = '100%'; // Set progress to 100%
                progressBarInner.textContent = '100%';

                if (data.success) {
                    // Show result message
                    document.getElementById('resultMessage').style.display = 'block';
                    // Update download link
                    document.getElementById('downloadLink').href = data.download_url;
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while uploading the file.');
            });
        });
    </script>
</body>
</html>